<#include "/admin/layout/layout_header.html"/>
<@head>
<link rel="stylesheet" href="${site_url}admin/css/custom/custom.min.css" type="text/css">
<link href="/admin/js/plugins/jquery.nestable/nestable.css" type="text/css" rel="stylesheet" media="screen,projection">
</@head>
<!-- //////////////////////////////////////////////////////////////////////////// -->
<!-- START CONTENT -->
<section id="content">

    <!--breadcrumbs start-->
    <div id="breadcrumbs-wrapper">
        <!-- Search for small screen -->
        <div class="header-search-wrapper grey hide-on-large-only">
            <i class="mdi-action-search active"></i>
            <input type="text" name="Search" class="header-search-input z-depth-2" placeholder="Explore Materialize">
        </div>
        <div class="container">
            <div class="row">
                <div class="col s12 m12 l12">
                    <h5 class="breadcrumbs-title">管理菜单</h5>
                    <ol class="breadcrumbs">
                        <li><a href="${site_url}admin/dashboard">Dashboard</a></li>
                        <li><a href="${site_url}admin/menu">菜单管理</a></li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <!--breadcrumbs end-->

    <!--start container-->
    <div class="container">
        <div class="section">
            <div class="caption">
                <div class="s12 m6 l4">
                    <a class="btn waves-effect teal waves-light" href="/admin/menu/item/create">新建</a>
                </div>
            </div>
            <div class="divider"></div>
            <div class="row">
                <div class="col s12 m8 l8 offset-l3 offset-m3" style="min-height: 400px;">
                    <div class="dd" id="menu" value="${menuType.id}">
                        <ol class="dd-list">
                            <#if menuList.size()==0>
                                没有记录..
                                <#else>
                                    <!--展示菜单-->
                                    <#macro seprateMenu _menuList>
                                        <!--redundancy check-->
                                        <!--<#if _menuList?? && _menuList?size gt 0>-->
                                            <#list _menuList as menu>
                                                <li class="dd-item dd3-item" data-id="${menu.id}">
                                                    <div class="dd-handle dd3-handle"></div>
                                                    <div class="dd3-content">${menu.name}<span class="right"><a href="/admin/menu/item/edit/${menu.id}">编辑</a></span></div>

                                                    <#if menu.getMenuList()?? && menu.getMenuList()?size gt 0>
                                                        <ol class="dd-list">
                                                        <@seprateMenu _menuList=menu.getMenuList() />
                                                        </ol>
                                                    </#if>
                                            </#list>
                                        <!--</#if>-->
                                    </#macro>

                                    <!-- 调用宏 生成递归树 -->
                                    <@seprateMenu _menuList=menuList />

                            </#if>
                        </ol>
                    </div>
                    <div class="input-field col s12">
                        <button class="btn cyan waves-effect waves-light right" id="btnsave" type="button">保存
                            <i class="mdi-content-send right"></i>
                        </button>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!--end container-->
</section>
<!-- END CONTENT -->

<#include "/admin/layout/layout_footer.html" />
<@script>
<script type="text/javascript" src="/admin/js/plugins/jquery.nestable/jquery.nestable.js"></script>
<script>

    $(document).ready(function () {
        $('#menu').nestable();
        $("#btnsave").click(function (e) {
            var data = $('#menu').nestable('serialize');
            var jsonData = JSON.stringify(data);
            console.log(data);
            $.ajax({
                type:"post",
                url:"/admin/menu/sortMenuItem",
                data:{data:jsonData,menuType:$('#menu').attr("value")},
                beforeSend: function () {
                    FinalDialog.show();
                },
                complete: function (XMLHttpRequest, status) {
                    if (status == 'timeout') { //超时,status还有success,error等值的情况
                        swal("请求超时");
                    }
                    FinalDialog.close();
                },
                success: function (data) {
                    console.log(data);
                    if (data['result'] == "SUCCESS") {
                        Materialize.toast('保存成功', 4000);
                    } else {
                        Materialize.toast('保存失败', 4000)
                    }
                }
            });
        });
    });

</script>
<script src="/admin/js/plugins/iconselect/jquery.qqFace.js"></script>
</@script>